<template>
  <div id="seat">
   
    <div class="rankNum">
      <p>选择排数：</p>
      <select name="" id="" @click="seatNum()" class="seatSelect">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
    </div>
    <ul>
      <li class="seatLi"
        v-for="(item, index) in newSeatSize"
        :key="index"
        :name="index + 's'+seId"
        @drop.prevent="drop()"
        @dragover.prevent="allowDrop()"
        @contextmenu.prevent="right()"

        @dragstart="dragStart()" draggable="true"
      >
      
        <!-- <p @dragstart="dragStart()" draggable="true"  class="move2" >
       
        </p> -->
      </li>
      
    </ul>
    <student :stuId="seId" :stucurId="securId" :stuList="seList"></student>
  </div>
</template>

<script>
import student from "./student";
export default {
  name: "seat",
  methods: {
    seatNum() {
      let arr = []
      for (let index = 0; index < document.getElementsByClassName("seatSelect").length; index++) {
        const element = document.getElementsByClassName("seatSelect")[index];
       arr.push(element.value)
      localStorage.rankNum = JSON.stringify(arr);
      this.num = JSON.parse(localStorage.rankNum);
      }
    },
    right() {
      this.cLi = event.target;
      var pos = {
        clientLeft: event.clientX,
        clientTop:
          event.clientY +
          (document.body.scrollTop || document.documentElement.scrollTop),
      };
      if (!document.getElementById("contextmmenu")) {
        let oDiv = document.createElement("div");
        let bkInput = document.createElement("input");
        oDiv.id = "contextmmenu";
        bkInput.setAttribute("type", "color");
        bkInput.setAttribute("class", "bkInput");
        oDiv.setAttribute("class", "rightBk");
        oDiv.style.cssText =
          "position: absolute;left:" +
          pos.clientLeft +
          "px;top:" +
          pos.clientTop +
          "px;display:block;background: blanchedalmond;padding: 5px;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4)";
        oDiv.innerHTML = "背景颜色:";
        oDiv.appendChild(bkInput);
        document.body.appendChild(oDiv);
      } else {
        document.getElementById("contextmmenu").style.cssText =
          "position: absolute;left:" +
          pos.clientLeft +
          "px;top:" +
          pos.clientTop +
          "px;display:block;background: blanchedalmond;padding: 5px;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4)";
      }
      document.getElementById("contextmmenu").onclick = function (ev) {
        ev.stopPropagation();
        // return false;
      };
    },
    allowDrop() {
      student.methods.allowDrop();
    },
    dragStart() {
      student.methods.dragStart();
    },
    drop() {
      student.methods.drop();
    },
  },
  computed: {
    newSeatSize() {
      return (this.seatSize = new Array(7 * this.num[this.seId]));
    },
    // ranknum(){

    // }
  },
  props:{
    seId:{
      type:Number,
    },
    securId:{
      type:Number,
    },
    seList:{

    }
  },
  //通过组件名可直接得到组件中的数据，底层是父子组件间的通信
  mounted() {
    //初始时默认排数
    if (localStorage.rankNum) {
      this.num = JSON.parse(localStorage.rankNum);
    }
    for (let index = 0; index < document.getElementsByClassName("seatSelect").length; index++) {
      const element = document.getElementsByClassName("seatSelect")[index];
      element.value = this.num[index]
    }
 
    // let selectValue = document.getElementsByClassName("seatSelect")[0].value;
    // localStorage.rankNum = selectValue

    //左键隐藏右击的盒子
    document.addEventListener("click", () => {
      if (
        document.getElementById("contextmmenu") &&
        document.getElementById("contextmmenu").style.display === "block"
      ) {
        document.getElementById("contextmmenu").style.display = "none";
      }
      if (document.getElementsByClassName("bkInput")[0]) {
        this.cLi.style.background = document.getElementsByClassName(
          "bkInput"
        )[0].value;
        let oMove = document.getElementsByClassName("move");
        for (let index = 0; index < oMove.length; index++) {
          const element = oMove[index];
          if (element.getAttribute("name") === this.cLi.getAttribute("name")) {
            element.style.background = document.getElementsByClassName(
              "bkInput"
            )[0].value;
          }
        }
      }
    });
    document.getElementsByClassName("save")[0].addEventListener("click",()=>{
      let seatArr = []
      let sallLi = document.querySelectorAll(".seatLi");
      for (let index = 0; index < sallLi.length; index++) {
        let obj = {};
        const element = sallLi[index];
        
        if (element.innerText) {
          obj = {
            id: element.getElementsByTagName("p")[0].id,
            name: element.getElementsByTagName("p")[0].innerText.trim(),
            group: element.getElementsByTagName("p")[0].getAttribute("name"),
            bk:element.getElementsByTagName("p")[0].style.background,
          };
        } else {
          obj = {
            id: "",
            name: "",
            group: "",
            bk:"",
          };
        }
        seatArr.push(obj);
        
      }
      console.log(seatArr);
      localStorage.seatArr = JSON.stringify(seatArr)
    })
    document.getElementsByClassName("clear")[0].addEventListener("click",()=>{
      console.log(1);
      localStorage.clear();
    })
  },
  components: {
    student,
  },
  data() {
    return {
      seatSize: new Array(49),
      num: [7,7],
      //通过组件名获得组件中的数据，且赋给std
      std: student.data().std,
      student,
      //被点击的li
      cLi: null,

    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- 添加"scoper""属性能够限制 这个css指对当前组件生效 -->
<style scoped>
* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  width: 126px;
  height: 55px;
  line-height: 55px;
  background: #ffffff;
  border: 1px solid black;
  position: relative;
}
.rankNum select {
  width: 90px;
  margin-top: 5px;
}
li p {
  width: 100%;
  height: 100%;
  text-align: center;
}
ul {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  margin: 0 auto;
  margin-top: 15px;
}
.teacher {
  width: 374.01px;
  height: 50px;
  text-align: center;
  background: rebeccapurple;
  position: absolute;
  right: 0;
  bottom: -55px;
  color: #ffffff;
  font-size: 30px;
  line-height: 50px;
  margin-right: 50px;
}
</style>
